<template>
  <div>
    <Search @searchClick="getSearchList"></Search>
    <GoodsListNav @clickCategory="getCategoryId"></GoodsListNav>
    <div class="container">
      <!-- 商品展示容器 -->
      <div class="goods-box">
        <div class="goods-list-box">
<!--          <div class="goods-list-tool">-->
<!--            <ul>-->
<!--              <li-->
<!--                v-for="(item, index) in goodsTool"-->
<!--                :key="index"-->
<!--                @click="orderBy(item.en, index)"-->
<!--              >-->
<!--                <span :class="{ 'goods-list-tool-active': isAction[index] }"-->
<!--                  >{{ item.title }} <Icon :type="icon[index]"></Icon-->
<!--                ></span>-->
<!--              </li>-->
<!--            </ul>-->
<!--          </div>-->
          <div class="goods-list">
            <div
              class="goods-show-info"
              v-for="(item, index) in orderGoodsList"
              :key="index"
            >
              <div class="goods-show-img">
                <router-link
                  :to="{ name: 'GoodsDetail', query: { productId: item.productId } }"
                >
                  <img v-lazy="item.imgUrl[0]" style="width: 100%;height: 100%;"/>
                </router-link>
              </div>
              <div class="goods-show-price">
                <span>
                  <Icon type="social-yen text-danger"></Icon>
                  <span class="seckill-price text-danger">{{ item.price }}</span>
                </span>
              </div>
              <div class="goods-show-detail">
                <span v-html="item.intro"></span>
              </div>
              <div class="goods-show-num">
                累计销量 <span>{{ item.saleNum }} </span>
              </div>
              <div class="goods-show-seller">
                <span>{{ item.shopName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

<!--      分页-->
      <div class="goods-page">
        <Page
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :total="total"
          :current="current"
          :page-size="pageSize"
          show-sizer
        ></Page>
      </div>
    </div>
    <Spin size="large" fix v-if="isLoading"></Spin>
  </div>
</template>

<script>
import Search from "@/components/Search";
import GoodsListNav from "@/components/nav/GoodsListNav";
import GoodsClassNav from "@/components/nav/GoodsClassNav";
import store from "@/vuex/store";
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: "GoodsList",
  beforeRouteEnter(to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  components: {
    Search,
    GoodsListNav,
    GoodsClassNav
  },
  store,
  data() {
    return {
      listFlag: 0,//0全部商品、1分类别商品、2搜索所得商品
      searchList:[], //搜索商品列表
      searchTotal:0,//搜索商品总数
      keyword: "null",
      categoryId: -1,
      categoryList: [],//分类别商品列表
      categoryTotal: 0,//分类别商品总数
      goodsList: [],//总商品列表
      goodsTotal: 0,//商品总数
      orderGoodsList: [],//展示的商品列表
      total: 0,
      current: 1,
      pageSize: 10,
      index: 1,
      cid: 0,
      beforeImg: "",
      isAction: [true, false, false],
      icon: ["arrow-up-a", "arrow-down-a", "arrow-down-a"],
      goodsTool: [
        { title: "销量", en: "sale" },
        { title: "评论数", en: "remarks" },
        { title: "价格", en: "price" }
      ]
    };
  },
  created() {
    if (this.flags === 2) {
      this.showSearchList()
    }else {
      this.selectCategory();
    }
  },
  mounted() {
    this.keyword = "null";
  },
  computed: {
    ...mapState(["asItems", "isLoading"]),
  },
  methods: {
    ...mapMutations(["SET_GOODS_ORDER_BY"]),
    orderBy(data, index) {
      this.icon = ["arrow-down-a", "arrow-down-a", "arrow-down-a"];
      this.isAction = [false, false, false];
      this.isAction[index] = true;
      this.icon[index] = "arrow-up-a";
      this.SET_GOODS_ORDER_BY(data);
    },
    //获取后台的商品列表
    getOrderList() {
      this.total = this.goodsTotal
      const list = Object.assign([],this.goodsList)
      const left = (this.current - 1) * this.pageSize
      if (this.total - left < this.pageSize) {
        this.orderGoodsList = list.splice(left, this.total - left)
      } else {
        this.orderGoodsList = list.splice(left, this.pageSize)
      }
    },
    loadGoodsList() {
      const _this = this
      this.$http.get("/product/allinCate").then(resp => {
        const res = resp.data.data;
          if (resp.data.code === 200) {
            for (let i = 0;i < res.length;i++) {
              _this.goodsList = this.goodsList.concat(res[i].products);
              _this.goodsTotal += res[i].products.length;
            }
            _this.current = 1
            _this.listFlag = 1
            this.getOrderList()
          } else {
            this.$Message.error('商品数据请求失败');
          }
          _this.current = 1
        });
    },
    // 分页
    changePage(newpage) {
      this.current = newpage;
      console.log(this.total)
      console.log("ttttttttttt")
      if (this.categoryId > 0) {
        this.showCategoryList()
      } else {
        this.getOrderList();
      }
    },
    // 每页显示数据数量
    changePageSize(newPageSize) {
      this.pageSize = newPageSize;
      if (this.categoryId > 0) {
        this.showCategoryList()
      } else {
        this.getOrderList();
      }
    },

    // 选择类别
    getCategoryId(cid) {
      this.categoryId = cid
      this.selectCategory()
    },
    showCategoryList() {
      this.total = this.categoryTotal
      const list = Object.assign([],this.categoryList)
      const left = (this.current - 1) * this.pageSize
      if (this.total - left < this.pageSize) {
        this.orderGoodsList = list.splice(left, this.total - left)
      } else {
        this.orderGoodsList = list.splice(left, this.pageSize)
      }
    },
    selectCategory() {
      const _this = this
      if (this.categoryId > 0) {
        // const list = Object.assign([],this.goodsList)
        // console.log(list)
        // console.log("----------")
        // this.$http.get('/product/num').then(resp => {
        //   const res = resp.data.data
        //   _this.total = res.num
        //   let left = 0
        //   for (let i = 0;i < res.length; i++) {
        //     if (cid === i + 1) {
        //       _this.categoryList = list.splice(left, res.num)
        //     } else {
        //       left += res.num
        //     }
        //   }
        // })
        // console.log(_this.categoryList)
        // console.log("cccccccccccc")
        // _this.current = 1
        // _this.showCategoryList()
        // _this.categoryList

        this.$http.get('/category/' + this.categoryId).then(res => {
          // _this.total = res.data.data.length
          for (let i = 0; i < _this.categoryList.length; i++) {
            _this.$http.get('/productImage/' + _this.categoryList[i].id).then(resp => {
              _this.$set(_this.categoryList[i], 'imgUrl', [resp.data.data[0].imgUrl])
            })
          }
          _this.categoryList = res.data.data
          _this.categoryTotal = res.data.data.length
          _this.current = 1
          _this.listFlag = 1
          _this.showCategoryList()
        })
      } else {
        this.loadGoodsList()
      }
    },
    getSearchList(data)
    {
      this.searchTotal = data.total;
      this.searchList = data.searchList
      this.current = 1
      this.listFlag = 2
      this.showSearchList()
    },
    showSearchList() {
      this.total = this.searchTotal
      const list = Object.assign([],this.searchList)
      const left = (this.current - 1) * this.pageSize
      if (this.total - left < this.pageSize) {
        this.orderGoodsList = list.splice(left, this.total - left)
      } else {
        this.orderGoodsList = list.splice(left, this.pageSize)
      }
    }
  },
  watch: {
    $route: function(to, from) {
      if (this.$route.query.id == null) {
        this.keyword = this.$route.query.keyword;
      }
      if (this.$route.query.keyword == null) {
        this.cid = this.$route.query.cid;
        this.keyword = "null";
      }
      this.current = 1;
      this.pageSize = 10;
      this.selectCategory(this.categoryId)
    }
  }
};
</script>

<style scoped>
.container {
  margin: 15px auto;
  width: 93%;
  min-width: 1000px;
}
.text-danger {
  color: #a94442;
}
.seckill-price {
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
}
.goods-box {
  display: flex;
}
/* ---------------侧边广告栏开始------------------- */
.as-box {
  width: 200px;
  border: 1px solid #ccc;
}
.item-as-title {
  width: 100%;
  height: 36px;
  color: #b1191a;
  line-height: 36px;
  font-size: 18px;
}
.item-as-title span:first-child {
  margin-left: 20px;
}
.item-as-title span:last-child {
  float: right;
  margin-right: 15px;
  font-size: 10px;
  color: #ccc;
}
.item-as {
  width: 160px;
  margin: 18px auto;
}
.item-as-img {
  width: 160px;
  height: 160px;
  margin: 0px auto;
}
.item-as-price span {
  font-size: 18px;
}
.item-as-intro {
  margin-top: 5px;
  font-size: 12px;
}
.item-as-selled {
  margin-top: 5px;
  font-size: 12px;
}
.item-as-selled span {
  color: #005aa0;
}
/* ---------------侧边广告栏结束------------------- */

/* ---------------商品栏开始------------------- */
.goods-list-box {
  margin-left: 15px;
  /*  width: calc(100% - 215px); */
}
.goods-list-tool {
  width: 100%;
  height: 38px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.goods-list-tool ul {
  padding-left: 15px;
  list-style: none;
}
.goods-list-tool li {
  cursor: pointer;
  float: left;
}
.goods-list-tool span {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-left: none;
  line-height: 36px;
  background-color: #fff;
}
.goods-list-tool span:hover {
  border: 1px solid #e4393c;
}
.goods-list-tool i:hover {
  color: #e4393c;
}
.goods-list-tool-active {
  color: #fff;
  border-left: 1px solid #ccc;
  background-color: #e4393c !important;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods-show-info {
  width: 240px;
  padding: 10px;
  margin: 15px 0px;
  border: 1px solid #fff;
  cursor: pointer;
}
.goods-show-info:hover {
  border: 1px solid #ccc;
  box-shadow: 0px 0px 15px #ccc;
}
.goods-show-price {
  margin-top: 6px;
}
.goods-show-detail {
  font-size: 12px;
  margin: 6px 0px;
}
.goods-show-num {
  font-size: 12px;
  margin-bottom: 6px;
  color: #009688;
}
.goods-show-num span {
  color: #005aa0;
  font-weight: bold;
}
.goods-show-seller {
  font-size: 12px;
  color: #e4393c;
}
.goods-page {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/* ---------------商品栏结束------------------- */
</style>
